<template>
    <div ref="verticalBarRef" :id="id" :option="option" :type="type" class="w100 h100"></div>
</template>

<script>
export default {
  props: ["option",'id','type'],
  data() {
    return {
      moreBarChart: null,
    };
  },
  created() {
    window.addEventListener("resize", this.chartsResize);
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.chartsResize);
  },
  mounted() {
	  this.$nextTick(() =>{
      this.init()
    })
  },
  watch: {
    option(val) {
      this.init();
    }
  },
  methods: {
    init() {
      this.moreBarChart = this.$echarts.init(document.getElementById(this.id));
      if (JSON.stringify(this.option) !== '{}' ) {
        this.initEchartData();
      }
      this.moreBarChart.on('click',(params)=>{
      	this.$emit("clickBidVisiti",params)
      })
    },
    initEchartData() {
      let obj;
    	if(!this.type){
    		obj= this.echartCommon.moreVerticalBar(this.option)
    	} else if (this.type == "cockpit"){
    		obj = this.option;
    	}else{
    		obj= this.echartCommon.bcMoreVerticalBar(this.option)
    	}
      this.moreBarChart.clear()
      this.moreBarChart.setOption(obj);
      this.moreBarChart.on('click', function (param) {
      });
      if(this.option.legend && this.option.legend.click) {
        this.moreBarChart.on('legendselectchanged', this.option.legend.click);
      }
      setTimeout(() => this.moreBarChart.resize(), 1000);
      this.moreBarChart.on("click",(params)=>{
    	this.$emit("clickMoreBar",params)
    })
    },
    //重定大小
    chartsResize() {
      this.moreBarChart.resize();
    }
  }
};
</script>

<style>
</style>
